<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black"></text>
			</view>
		</tn-nav-bar>

		<template v-if="show == 1">
			<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

				<!-- 图片描述开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">请输入绘图提示词 *</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<!-- <text class="tn-padding-xs">6-20字内</text> -->
						<text class="tn-icon-keyboard-circle"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
					<textarea maxlength="1000" placeholder="提示词,最多1000个字符" :value="prompt" @input="inputPrompt"
						placeholder-style="color:#AAAAAA;"
						style="height: 200rpx;padding-right: 80rpx !important;letter-spacing: 4rpx; line-height: 10rpx;"></textarea>
				</view>
				<!-- 图片描述结束 -->


				<!-- 图片否定词开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">请输入图片否定词 *</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<!-- <text class="tn-padding-xs">6-20字内</text> -->
						<text class="tn-icon-keyboard-circle"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
					<textarea maxlength="1000" placeholder="否定词" @input="inputNegativePrompts" placeholder-style="color:#AAAAAA;"
						:value="negativePrompts"
						style="height: 100rpx;height: 80rpx; padding-right: 80rpx !important;letter-spacing: 4rpx; line-height: 10rpx;"></textarea>
				</view>
				<!-- 图片否定词结束 -->

				<!-- 图片宽高度开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-lucky-money" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">图片宽高</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<text class="tn-padding-xs">宽*高不能高于589824</text>
						<text class="tn-icon-lucky-money"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<input placeholder="为该套图片写点什么呢" type="digit" :value="width" name="input" @input="inputWidth"
						placeholder-style="color:#AAAAAA"></input>
				</view>
				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<input placeholder="为该套图片写点什么呢" type="digit" :value="height" name="input" @input="inputHeight"
						placeholder-style="color:#AAAAAA"></input>
				</view>
				<!-- 图片宽高度结束 -->

				<!-- 图片降噪开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-lucky-money" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">图片降噪</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<text class="tn-padding-xs">值只能为10-100</text>
						<text class="tn-icon-lucky-money"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<input placeholder="请输入图片降噪" type="digit" :value="steps" name="input" @input="inputSteps"
						placeholder-style="color:#AAAAAA"></input>
				</view>
				<!-- 图片降噪结束 -->

				<!-- 图片随机种子开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-lucky-money" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">图片随机种子</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<text class="tn-padding-xs">值越大越好</text>
						<text class="tn-icon-lucky-money"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<input placeholder="请输入图片随机种子" type="digit" :value="seed" name="input" @input="inputSeed"
						placeholder-style="color:#AAAAAA"></input>
				</view>
				<!-- 图片随机种子结束 -->

				<!-- 图片类型开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-ticket" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">采样器</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<text class="tn-padding-xs">请选择采样请</text>
						<text class="tn-icon-ticket"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<!-- <input placeholder="为该套图片写点什么呢" type="number" :value="imageScore" name="input" @input="inputImageScore" placeholder-style="color:#AAAAAA"></input> -->
					<picker @change="changeSample" :value="sampler" :range="samplerList">
						<view class="tn-flex tn-flex-row-between">
							<view class="justify-content-item">
								<view class="tn-text-bold tn-text-lg">
									类型
								</view>
								<view class="tn-color-gray tn-padding-top-xs">
									{{sampler}}
								</view>
							</view>
							<view class="justify-content-item tn-text-lg tn-color-grey">
								<view class="tn-icon-right tn-padding-top"></view>
							</view>
						</view>
					</picker>
				</view>
				<!-- 图片类型结束 -->

				<!-- 图片张数开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-ticket" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">图片张数</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<text class="tn-padding-xs">请选择图片生成张数</text>
						<text class="tn-icon-ticket"></text>
					</view>
				</view>

				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<!-- <input placeholder="为该套图片写点什么呢" type="number" :value="imageScore" name="input" @input="inputImageScore" placeholder-style="color:#AAAAAA"></input> -->
					<picker @change="changeNumber" :value="number" :range="numberList">
						<view class="tn-flex tn-flex-row-between">
							<view class="justify-content-item">
								<view class="tn-text-bold tn-text-lg">
									张数
								</view>
								<view class="tn-color-gray tn-padding-top-xs">
									{{number}}
								</view>
							</view>
							<view class="justify-content-item tn-text-lg tn-color-grey">
								<view class="tn-icon-right tn-padding-top"></view>
							</view>
						</view>
					</picker>
				</view>
				<!-- 图片张数结束 -->

				<!-- 图片风格开始 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
					<view class="tn-flex justify-content-item">
						<view class="tn-bg-black tn-color-white tn-text-center"
							style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
							<text class="tn-icon-tag" style="font-size: 30rpx;"></text>
						</view>
						<view class="tn-text-lg tn-padding-right-xs tn-text-bold">绘图风格</view>
					</view>
					<view class="justify-content-item tn-text-df tn-color-grey">
						<text class="tn-padding-xs">请选择绘画风格</text>
						<text class="tn-icon-constellation"></text>
					</view>
				</view>

				<view class="tn-tag-content tn-margin tn-text-justify">
					<view v-for="(item, index) in styleList" :key="index"
						class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
						:class="[item == style ? `tn-bg-green--light tn-color-green` : 'tn-bg-gray--light tn-color-gray--dark']"
						@click="clickStyle(index)">
						<text :class="['tn-padding-right-xs tn-icon-pin']"></text> {{ item }}
					</view>
				</view>
				<!-- 图片风格结束 -->

				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed" v-if="accountStae">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button backgroundColor="#3668fc" padding="40rpx 0" width="70%" fontBold @click="submit">
							<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
							<text class="tn-color-white">立 即 绘 图</text>
							<!-- <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text> -->
						</tn-button>
						<view class="tn-padding-xs tn-text-sm">
							<text class="tn-icon-tip-fill tn-color-gray tn-padding-right-xs"></text>
							<!-- <text class="tn-color-gray">日签 +20 积分</text> -->
						</view>
					</view>
				</view>

			</view>
		</template>

		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { configState } from "@/utils/api/sys.js"
	import { text2Image } from "@/utils/api/ai.js"
	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		data() {
			return {
				samplerList: ["ddim", "lmsd", "pndm", "euler_d", "euler_a_d", "dpm"],
				styleList: ["赛博朋克","CG渲染", "动漫","通用漫画", "Momoko", "MJ风格", "国画","国风", "写实主义", "虚幻引擎", "黑白插画", "版绘", "低聚", "工业霓虹", "电影艺术", "史诗大片", "暗黑", "涂鸦", "漫画场景", "特写", "儿童画",
					"油画", "水彩画", "素描", "卡通画", "浮世绘", "吉卜力", "哑光", "现代中式", "相机",
					 "霓虹游戏", "蒸汽波", "宝可梦", "火影忍者", "圣诞老人", "个人特效", "剪纸", "齐白石", "张大千",
					"丰子恺", "毕加索", "梵高", "塞尚", "莫奈", "马克·夏加尔", "丢勒", "米开朗基罗", "高更", "爱德华·蒙克", "托马斯·科尔",
					"安迪·霍尔", "新海诚", "倪传婧", "村上隆", "黄光剑", "吴冠中", "林风眠", "木内达朗", "萨雷尔", "杜拉克", "比利宾", "布拉德利", "普罗旺森", "莫比乌斯",
					"格里斯利", "比普", "卡尔·西松", "玛丽·布莱尔", "埃里克·卡尔", "扎哈·哈迪德", "包豪斯", "英格尔斯",
					"RHADS", "阿泰·盖兰", "俊西", "坎皮恩", "德尚鲍尔", "库沙特", "雷诺阿"
				],
				numberList: [1, 2, 3, 4],
				customBtn: true,
				show: 2,
				// 表单数据
				sampler: "ddim", // 采样器
				fileList: [], // 相册图片集合
				accountStae: true,
				steps: 50, // 降噪
				seed: 5000000000, // 随机种植
				style: "", // 绘图风格
				width: 864, // 宽度
				height: 1563, // 高度
				prompt: '', // 描述词
				negativePrompts: '', // 描述反向词
				number: 1, // 生成张数
			}
		},
		onLoad() {},
		onShow() {
			this.getSysState()
		},
		methods: {
			getSysState() {
				configState({
					key: "wechat_mini_state"
				}).then(res => {
					this.show = res.val
					if (res.val == 1) {}
				})
			},
			changeNumber(e) { // 图片张数
				this.number = this.numberList[e.detail.value]
			},
			changeSample(e) { // 图片采样器
				console.log("图片降噪", e)
				this.sampler = this.samplerList[e.detail.value]
			},
			inputSteps(e) { // 图片降噪步数
				this.steps = e.detail.value
			},
			inputNegativePrompts(e) { // 反向提示词
				this.negativePrompts = e.detail.value
			},
			inputPrompt(e) { // 描述词
				this.prompt = e.detail.value
			},
			inputHeight(e) { // 图片高度
				this.height = e.detail.value
			},
			inputSeed(e) {// 品质与细节
				this.seed = e.detail.value
			},
			inputWidth(e) { // 图片宽度
				console.log("宽度", e)
				this.width = e.detail.value
			},
			clickStyle(index) { // 图片风格
				console.log(index)
				let select = this.styleList[index]
				if (this.style == select) {
					this.style = ""
					return
				}
				this.style = select
			},
			submit() { // 生成壁纸
				let postParams = {
					"prompt": this.prompt,
					"guidance_scale": 20,
					"height": this.height,
					"width": this.width,
					"negative_prompts": this.negativePrompts,
					"sampler": this.sampler,
					"seed": this.seed,
					"steps": this.steps,
					"style": this.style,
					"upsample": 1,
					"number": this.number,
				}
				uni.showLoading({
					title: '图片绘制中',
					mask: true
				})
				text2Image(postParams).then(res => {
					uni.hideLoading()
					let imageUrl = JSON.stringify(res)
					uni.navigateTo({
						url: '/pageE/ai_picture_6?image=' + imageUrl,
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 180rpx;
		height: calc(220rpx + env(safe-area-inset-bottom) / 2);
		height: calc(220rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>